<template>
  <!--添加-->
  <!-- <el-button type="success" size="small" round class="m-b-10" @click="onAdd"
    >添加banner图</el-button
  > -->
  <el-table :data="dataList.comList" border style="width: 100%">
    <el-table-column prop="id" label="ID" />
    <el-table-column label="轮播图">
      <template #default="scope">
        <img
          :src="'http://localhost:5000/' + scope.row.banner_pic"
          class="image"
        />
      </template>
    </el-table-column>
    <el-table-column prop="add_time" label="添加时间" />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="onDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!--分页查询-->
  <pagination
    :total="selectData.count"
    @change-page="changePage"
    @change-pageSize="changePageSize"
  />
  <!--对话框-->
  <!-- 后台接口需要修改，暂未开发 -->
  <!-- <el-dialog 
    width="30%"
    v-model="isShow"
   >
   <form action="http://localhost:5000/admin/banner/banner_save" method="post" enctype="multipart/form-data">
       <input type="hidden" name="type" value=1>
       <input type="file" name="banner_pic">
       <input type="submit" value="保存"/>
   </form>
  </el-dialog> -->
</template>

<script lang="ts">
import { ElMessage } from "element-plus";
import { computed, defineComponent, onMounted, reactive, ref, toRefs } from "vue";
import { tsGetBannerList, tsDeleteBanner } from "../api/tsApi";
import { BannerData } from "../type/banner";
import pagination from "../components/pagination.vue";
export default defineComponent({
  components: { pagination },
  setup() {
    const data = reactive(new BannerData());
    
    
    onMounted(() => {
      getBannerList();
    });

    const onDelete = (row) => {
      tsDeleteBanner({ type: 1, id: row.id }).then((res: any) => {
        if (res.code == 200) {
          ElMessage.success(res.msg);
          getBannerList();
        }
      });
    };

    const getBannerList = () => {
      tsGetBannerList({ type: 1 }).then((res) => {
        data.selectData.count = res.data.length;
        data.list = res.data;
      });
    };

    const dataList = reactive({
      comList: computed(() => {
        return data.list.slice(
          (data.selectData.page - 1) * data.selectData.pageSize,
          data.selectData.page * data.selectData.pageSize
        );
      }),
    });

    const onAdd = () => {
      data.isShow = true
      console.log("添加");
      //    data.isShow = true
    };
    
    const changePage = (page) => {
      data.selectData.page = page;
    };

    const changePageSize = (pageSize) => {
      data.selectData.pageSize = pageSize;
    };

    return {
      ...toRefs(data),
      dataList,
      onDelete,
      changePage,
      changePageSize,
      onAdd
    };
  },
});
</script>

<style lang="scss" scoped>
.image {
  width: 150px;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>